<template>
  <div class="taskDetail zy-content">
    <back-level :goPage="back" />
    <Card :title="`${$t('盘点对象')}`" class="detail-content-layout">
      <Table @on-column-width-resize="onColumnWidthResize" class="resizable-table" border :columns="columns"
             :data="effPlanDetail.backupStandingBookVos"></Table>
    </Card>
  </div>
</template>
<script>
import toggleTableOperation from '@/mixins/toggleTableOperation'
export default {
  name: 'taskDetail',
  mixins: [toggleTableOperation],
  components: {},
  props: ['effPlanDetail'],
  data() {
    return {
      columns: [
        {
          type: 'index',
          width: 80,
          title: `${this.$t('common.index')}`,
          align: 'center',
          resizable: true
        },
        {
          title: `${this.$t('spareParts.Warehouse')}`,
          key: 'warehouseName',
          minWidth: 120,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('spareParts.Rack')}`,
          key: 'shelfConfigName',
          minWidth: 100,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('spareParts.Location')}`,
          key: 'locationConfigName',
          minWidth: 100,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('common.SpareClassification')}`,
          key: 'location',
          minWidth: 180,
          align: 'center',
          type: 'select',
          render: (h, params) => {
            return h('div', params.row.sparePartsABC + params.row.sparePartsVED)
          },
          resizable: true
        },
        {
          title: `${this.$t('料号')}`,
          key: 'materielNo',
          minWidth: 140,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('common.SpareNumber')}`,
          key: 'backupNo',
          minWidth: 160,
          align: 'center',
          type: 'input',
          resizable: true
        },
        {
          title: `${this.$t('common.GoodsName')}`,
          key: 'goodsName',
          minWidth: 160,
          align: 'center',
          type: 'input',
          resizable: true
        },
        {
          title: `${this.$t('spareParts.Specification')}`,
          key: 'specification',
          minWidth: 130,
          align: 'center',
          type: 'input',
          resizable: true
        },
        {
          title: `${this.$t('spareParts.quantity')}`,
          key: 'quantityInStock',
          minWidth: 100,
          align: 'center',
          type: 'input',
          resizable: true
        },
        {
          title: `${this.$t('品牌')}`,
          key: 'brand',
          minWidth: 100,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('物品分类')}`,
          key: 'goodsTypeStr',
          minWidth: 200,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('资产类型')}`,
          key: 'assetTypeStr',
          minWidth: 120,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('管理方式')}`,
          key: 'manageTypeStr',
          minWidth: 180,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('采购单价')}`,
          key: 'purchasePrice',
          minWidth: 150,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('安全库存')}`,
          key: 'safeStock',
          minWidth: 140,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('安全系数')}`,
          key: 'safetyCoefficient',
          minWidth: 140,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('采购提前期(天)')}`,
          key: 'purchaseLeadDay',
          minWidth: 220,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('折旧年限')}`,
          key: 'depreciation',
          minWidth: 180,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('数量')}`,
          key: 'quantityInStock',
          minWidth: 100,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('盘点数量')}`,
          key: 'backupNum',
          minWidth: 150,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('盘点备注')}`,
          key: 'remark',
          minWidth: 100,
          align: 'center',
          type: 'select',
          resizable: true
        },    
        {
          title: `${this.$t('结果')}`,
          key: 'backupNum',
          minWidth: 100,
          align: 'center',
          type: 'select',
          resizable: true,tooltip: true,
          render: (h, params) => {
            if(params.row.backupNum>params.row.quantityInStock){
              return h('div', [h('span', {}, this.$t('盘盈'))])
            }else if((params.row.backupNum||params.row.backupNum===0)&&(params.row.backupNum<params.row.quantityInStock)){
              return h('div', [h('span', {}, this.$t('盘亏'))])
            }else if(params.row.backupNum==params.row.quantityInStock){
              return h('div', [h('span', {}, this.$t('一致'))])
            }else{
              return h('div', [h('span', {}, '')])
            }
          },
        },     
      ]
    }
  },
  created() {
    this.getColumnWidth(this.columns)
  },
  methods: {
    back() {
      this.$emit('changeDetailVisible', false)
    }
  }
}
</script>
<style lang="scss">
.taskDetail {
  background: #fff;
  .title {
    display: flex;
    justify-content: flex-start;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    align-items: center;
    .back {
      color: #187bdb;
      font-size: 16px;
      padding-left: 20px;
      cursor: pointer;
      float: right;
    }
  }
}
</style>
